<template>
  <div class="main" style="margin: 10px">
    <el-card>
      <!-- <Toobar :AddBtnAuth="AddBtnAuth" @handleAdd='handleAdd'></Toobar> -->
      <div>
        <!--工具栏-->
        <div class="head-container">
          <div>
            <!-- 搜索 -->
            <span>
              <!-- <el-input v-model="searchKey" clearable placeholder="输入关键字搜索" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> -->
              <span class="filter-item">
                <!-- <el-button type="success" icon="el-icon-search">搜索</el-button>
                <el-button type="warning" icon="el-icon-refresh-left">重置</el-button> -->
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-permission="AddBtnAuth">新增</el-button>
              </span>
            </span>
            <span>
              <el-button-group>
                <!-- <el-button icon="el-icon-search"></el-button> -->
                <!-- <el-button icon="el-icon-refresh"></el-button> -->
              </el-button-group>
            </span>
          </div>
        </div>
      </div>
      <el-card style="margin-top: 10px">
        <el-table border ref="table" :data="tableData" style="width: 100%" row-key="id" lazy :load="getChildMenus" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">>
          <el-table-column type="index" label="#" width="55"> </el-table-column>
          <el-table-column prop="title" label="菜单标题"> </el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="50">
            <template slot-scope="scope">
              <e-icon :icon-name="scope.row.icon" v-if="scope.row.icon" />
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center">
          </el-table-column>
          <!-- <el-table-column prop="permissions" label="权限标识" align="center">
            <template slot-scope="scope">
              {{ scope.row.permissions == '' ? '--' : scope.row.permissions }}
            </template>
          </el-table-column> -->
          <el-table-column prop="component" label="组件路径" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.component == 'Layout'">--</span>
              <span v-else>{{
                scope.row.component == undefined ? "--" : scope.row.component
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="菜单类型" align="center" width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type == 1">目录</el-tag>
              <el-tag type="warning" v-if="scope.row.type == 2">菜单</el-tag>
              <el-tag type="danger" v-if="scope.row.type == 3">按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="hidden" label="是否可见" align="center">
            <template slot-scope="scope">
              <el-switch
                @change="changeSwitch(scope.row)"
                v-model="scope.row.hidden"
                :active-value="0"
                active-text="是"
                :inactive-value="1"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!-- 分页 -->
    <!-- <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList"
    /> -->
    <DialogMenu
      :dialogMenu="dialogMenu"
      :formData="formData"
      @handleSubmit="handleSubmit"
      @handleSubmitEdit="handleSubmitEdit"
    ></DialogMenu>
  </div>
</template>

<script>
import Toobar from "@/components/System/toobar";
import {
  getMenuPage,
  createMenu,
  updateMenu,
  deleteMenu,
  updateStatus,
} from "@/api/system/menu";
import DialogMenu from "@/components/System/menu/dialogMenu.vue";
import Pagination from "@/components/Pagination"; // el分页

export default {
  data() {
    return {
      AddBtnAuth: ["add"],
      tableData: [],
      dialogMenu: {
        show: false,
      },
      //条件查询搜索
      total: 0,
      listQuery: {
        // pageNum: 1,
        // pageSize: 10,
        importance: undefined,
        nodeName: undefined,
        type: undefined,
      },
      formData: {},
      oldPid: "",
    };
  },
  methods: {
    getList() {
      getMenuPage(this.listQuery).then((res) => {
        this.tableData = res.data;

        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    //懒加载
    getChildMenus(tree, treeNode, resolve) {
      const data = { parentId: tree.id };
      getMenuPage(data).then((res) => {
        resolve(res.data);
      });
    },
    // 新增按钮触发
    handleAdd() {
      this.dialogMenu = {
        show: true,
        title: "新增菜单",
        option: "add",
      };
      this.formData = {
        type: 1,
        hidden: 0,
        parentId: "",
        icon: "",
        path: "",
        title: "",
        sort: "",
        name: "",
        component: "",
        permissions: "",
      };
    },
    //提交新增请求
    handleSubmit() {
      createMenu(this.formData).then((res) => {
        if (res.code == 200) {
          this.dialogMenu.show = false;
          this.$message.success("新增成功！");
          if (this.formData.pid != 0) {
            // 实现无感刷新
            getMenuPage({ pid: this.formData.pid }).then((res) => {
              this.$set(
                this.$refs.table.store.states.lazyTreeNodeMap,
                this.formData.pid,
                res.data
              );
            });
          }
          this.getList();
        } else {
          this.dialogMenu.show = false;
          this.$message.success(res.message);
        }
      });
    },
    // 提交编辑请求
    handleSubmitEdit() {
      if (this.formData.id == this.formData.parentId) {
        this.$message.error('自己不能成为自己的下级！')
        return false
      }
      updateMenu(this.formData).then(res => {
        this.dialogMenu.show = false
        this.$message.success('修改成功！')
        if (this.formData.parentId != 0) {
          if (this.formData.parentId != this.oldPid) {
            // 这时候说明已经改变了上级类目
            getMenuPage({ parentId: this.oldPid }).then(res => {
              this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.oldPid, res.data)
              getMenuPage({ parentId: this.formData.parentId }).then(res => {
                this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.parentId, res.data)
              })
            })
          } else {
            getMenuPage({ parentId: this.formData.parentId }).then(res => {
              this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.parentId, res.data)
            })
          }
        } else {
          this.getList()
        }
        // // 无感刷新子节点数据
        // getMenuList({ pid: this.formData.pid }).then(res => {
        //   this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.pid, res.data)
        // })
      })
    },

    // 删除按钮触发
    handleDelete(row) {
      this.$confirm(
        "此操作将永久删除该菜单，并删除所属子级, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteMenu(row.id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 无感刷新
              getMenuPage({ parentId: row.parentId }).then((res) => {
                this.$set(
                  this.$refs.table.store.states.lazyTreeNodeMap,
                  row.parentId,
                  // res.data
                );
              });
              if (row.parentId == 0) {
                this.getList();
              }
            }

          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 编辑按钮触发
    handleEdit(row) {
      this.dialogMenu = {
        show: true,
        title: "修改菜单",
        option: "edit",
      };
      this.formData = {
        id: row.id,
        type: row.type,
        icon: row.icon,
        hidden: row.hidden,
        title: row.title,
        path: row.path,
        sort: row.sort,
        name: row.name,
        component: row.component,
        parentId: row.parentId + "",
        permissions: row.permissions,
      };
      this.oldPid = row.pid;
    },
    //监听switch事件
    async changeSwitch(row) {
      //修改状态
      updateStatus(row.id,row.hidden).then(res => {
        if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
        } else{
            this.$message({
            type: "info",
            message: "修改失败！",
          });
        }
      })
    },
                
  },
  mounted() {
    this.getList();
  },
  //将组件启用
  components: {
    Toobar,
    DialogMenu,
    Pagination,
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-switch.is-disabled {
  opacity: 1;
}
::v-deep .el-switch.is-checked .el-switch__core {
  &:hover {
    cursor: pointer;
  }
}
</style>